<template>
	<view>

		<view class="title">
			请如实填写随访单
			<view  style="position: absolute;right: 20rpx;">
				<button class="cu-btn round sm bg-blue" @click.stop="gotoDetail()">个人信息</button>
			</view>
		</view>
		<view class="userInfo">
			<view class="userItem">
				<view class="text-gray">姓名:</view>
				<view class="text-black info" s>{{ sysPatientEntity.patientName }}</view>
			</view>
			<view class="userItem">
				<view class="text-gray">科室:</view>
				<view class="text-black info" style="max-width: 110rpx;">{{ sysPatientEntity.patientDepartment }}</view>
			</view>
			<view class="userItem">
				<view class="text-gray">病种:</view>
				<view class="text-black info" style="max-width: 162rpx;">{{ sysPatientEntity.patientType }}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				1.爆发痛情况
			</view>
			<view class="container">
				<view class="table">
					<view class="row header">
						<text class="cell">爆发痛评分</text>
						<text class="cell">爆发痛时间</text>
					</view>
					<view v-if="form.sysPatientExpEntityList&&form.sysPatientExpEntityList.length>0" v-for="(item, index) in form.sysPatientExpEntityList" :key="index" class="row">
						<view class="cellContent" style="border-left:1px solid #e4dddd;">
								{{ item.explosive}}
						</view>
						<view class="cellContent">
								{{ item.explosiveTime }}
						</view>
					</view>
					<view v-if="!form.sysPatientExpEntityList||form.sysPatientExpEntityList.length==0" class="row">
						<view class="cellContent" style="border-left:1px solid #e4dddd;">
								暂无爆发痛记录
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				2.疼痛控制是否满意度
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerScoreFive', 'painControl', $event)" :range="pickerScoreFive">
					<view class="picker">
						{{ form.painControl ? form.painControl : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.painControl}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				3.治疗后疼痛评分
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerScoreTen', 'onRatingScale', $event)" :range="pickerScoreTen">
					<view class="picker">
						{{ form.onRatingScale ? form.onRatingScale : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.onRatingScale}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				4.手术镇痛满意情况
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerScore3', 'postoperative', $event)" :range="pickerScore3">
					<view class="picker">
						{{ form.postoperative ? form.postoperative : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.postoperative}}</view>
			</view>
		</view>
		
		<view class="formItem">
			<view class="question">
				5.随访时的静息痛评分
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerScoreTen', 'followRatingScale', $event)" :range="pickerScoreTen">
					<view class="picker">
						{{ form.followRatingScale ? form.followRatingScale : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.followRatingScale}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				6.是否服用镇痛药？
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('picker', 'painkillers', $event)" :range="picker">
					<view class="picker">
						{{ form.painkillers ? form.painkillers : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.painkillers}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				7.随访方式
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerPatientWay', 'patientWay', $event)" :range="pickerPatientWay">
					<view class="picker">
						{{ form.patientWay ? form.patientWay : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.patientWay}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				8.转归
			</view>
			<view class="cu-form-group">
				<picker v-if="pageType=='edit'" @change="pickerChange('pickerReturnTo', 'returnTo', $event)" :range="pickerReturnTo">
					<view class="picker">
						{{ form.returnTo ? form.returnTo : "请选择" }}
					</view>
				</picker>
				<view v-else class="tex-input-desc">{{form.returnTo}}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				9.服用何种镇痛药
			</view>
			<view class="cu-form-group">
				<textarea v-if="pageType=='edit'" v-model="form.painkillersDesc" :disabled="modalName != null"
					@input="textareaAInput('painkillersDesc', $event)" placeholder="请输入"></textarea>
					<view class="tex-tarea-desc" v-else>{{ form.painkillersDesc }}</view>
			</view>
		</view>

		<view class="formItem">
			<view class="question">
				10.爆发痛缓解情况
			</view>
			<view class="cu-form-group">
				<textarea v-if="pageType=='edit'" v-model="form.painDesc" :disabled="modalName != null" @input="textareaAInput('painDesc', $event)"
					placeholder="请输入"></textarea>
					<view class="tex-tarea-desc" v-else>{{ form.painDesc }}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				11.患者有哪些问题？
			</view>
			<view class="cu-form-group">
				<textarea v-if="pageType=='edit'" v-model="form.patientDesc" :disabled="modalName != null"
					@input="textareaAInput('patientDesc', $event)" placeholder="请输入"></textarea>
					<view class="tex-tarea-desc" v-else>{{ form.patientDesc }}</view>
			</view>
		</view>
		<view class="formItem">
			<view class="question">
				12.对患者的建议
			</view>
			<view class="cu-form-group">
				<textarea v-if="pageType=='edit'" v-model="form.patientOffer" :disabled="modalName != null"
					@input="textareaAInput('patientOffer', $event)" placeholder="请输入"></textarea>
					<view class="tex-tarea-desc" v-else>{{ form.patientOffer }}</view>
			</view>
		</view>
		

		<view class="formItem">
		</view>
		<view class="padding flex flex-direction bg-white">
			<button class="cu-btn bg-blue lg" v-if="pageType=='edit'" @click="savePatient">提交</button>
		</view>

		<lingfeng-timepicker ref="timePop" type="datetime-all" :defaultData="defaultData" :minDate="minDate" :safeArea="false"
			:maxDate="maxDate" @change="timeChange"></lingfeng-timepicker>

	</view>
</template>

<script>
import {
	toast,
	useRouter
} from '../../../utils/utils';
export default {
	data() {
		return {
			pageType:"edit",
			baofaIndex: -1,
			defaultData: {
				startTime: ""
			},
			minDate: {
				year: 1900,
				month: 3,
				date: 5
			},
			maxDate: {
				year: 2059,
				month: 9,
				date: 20
			},
			picker: ['是', '否'],
			pickerPatientWay:['微信','面访','电访'],
			pickerReturnTo: ['良好', '死亡'],
			pickerScore3: ['差(疼痛无缓解或加重)', '一般(疼痛部分缓解但不明显', '有效(疼痛缓解大于50%)', '良好(疼痛缓解大于75%，爆发痛)'],
			pickerScoreFive: ["1分", "2分", "3分", "4分", "5分"],
			pickerScoreTen: ["1分", "2分", "3分", "4分", "5分", "6分", "7分", "8分", "9分", "10分"],
			id: "",
			patientId:"",
			form: {
				"painControl": "",
				"onRatingScale": "",
				"postoperative": "",
				"explosive": "",
				"followRatingScale": "",
				"painDesc": "",
				"painMyselfControl": "",
				"painkillers": "",
				"painkillersDesc": "",
				"patientDesc": "",
				"patientId": null,
				"patientOffer": "",
				"patientWay": "",
				"returnTo": "",
				"id": null,
				"sysPatientExpEntityList": []
			},
			//患者基本信息
			sysPatientEntity:{
				
			}


		}
	},
	async onLoad(params) {
		console.log(params)
		if (params && params.id) {
			//查询详情
			this.id = params.id
			await this.getPatientDetail();
		}
		if (params && params.pageType) {
			this.pageType = params.pageType
		}
		if(params && params.patientId){
			this.patientId = params.patientId
			this.form.patientId= params.patientId
			//查询患者详情
			await this.getPatientInfoById();
		}
		this.defaultData.startTime = this.getNowDatetime();
	},
	methods: {
		async getPatientInfoById(){
			console.log(this.patientId)
			try{
				let res = await this.$api.getPatientInfoById(this.patientId);
				console.log( res)
				this.sysPatientEntity = res.patient
			}catch(e){
				toast("查询失败")
			}
		},
		//获取当前时间
		getNowDatetime() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			let second = date.getSeconds();
			return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
		},
		showPop(index) {
			this.baofaIndex = index
			this.$refs.timePop.show();
		},
		timeChange(val) {
			console.log(val);
			console.log(this.baofaIndex);
			console.log(this.form.sysPatientExpEntityList);
			this.form.sysPatientExpEntityList[this.baofaIndex].explosiveTime = val
		},
		addRow() {
			this.form.sysPatientExpEntityList.push({
				id:'',
				explosive: '',
				explosiveTime: ''
			});
		},
		deleteRow(index) {
			//判断最少一行
			if (this.form.sysPatientExpEntityList.length <= 1) {
				toast("至少保留一行");
				return;
			}
			this.form.sysPatientExpEntityList.splice(index, 1);
		},
		gotoDetail(id) {
			useRouter('/pages/my/profile', {patientId:this.patientId}, 'navigateTo')

			// useRouter('/pages/index/detail/detail', {id:this.id}, 'navigateTo')
		},
		textareaAInput(fieldType, e) {
			this.form[fieldType] = e.detail.value
		},
		pickerChange(pickerType, fieldType, e) {
			this.form[fieldType] = this[pickerType][e.detail.value]
		},
		pickerBaoFaChange(pickerType,index, e) {
			this.form.sysPatientExpEntityList[index].explosive = this[pickerType][e.detail.value]
		},
		//获取详情
		async getPatientDetail() {
			if (!this.id) {
				return;
			}
			let res = await this.$api.getPatientDetail({
				id: this.id
			});
			if (res.sysPatientFollowEntity) {
				let result = res.sysPatientFollowEntity
				Object.keys(result).forEach((key) => {
					if (this.form.hasOwnProperty(key)) {
						this.form[key] = result[key] == null ? "" : result[key];
					}
				});
			}
			console.log(this.form)
		},
		//保存随访单
		async savePatient() {
			let res = await this.$api.savePatient(this.form);
			if (res.msg == "success") {
				toast("提交成功");
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/list",
						success() {
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.$vm.refreshList();
						}
					})
				}, 500)
			}
		}

	}
}
</script>

<style lang="scss">
.baofaAdd {
	width: 100%;
	height: 80rpx;
	font-size: 28rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	height: 90rpx;
}

.header {
	font-weight: bold;
}

.cell {
	flex: 1;
	padding: 20rpx;
	text-align: center;
}

.cellContent {
	display: flex;
	flex: 1;
	padding-left: 10rpx;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-right:1px solid #e4dddd;
}

.delete-btn {
	color: red;
	cursor: pointer;
	flex: 1;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.cellContentPicker {
	flex: 3;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: left;
}

.userInfo {
	display: flex;
	justify-content: space-between;
	background-color: #fff !important;
	border-bottom: 1px solid #e0dbdb;
	padding: 18rpx;

	.userItem {
		display: flex;
		justify-content: center;

		.info {
			max-width: 82rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: clip;
			white-space: nowrap;
		}
	}

}

.title {
	font-size: 38rpx;
	font-weight: bold;
	display: flex;
	justify-content: center;
	padding: 10rpx;
	background-color: #fff;
}

.formItem {
	background-color: #fff;
	padding: 10px;

	.question {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.cu-form-group {
		background-color: #f5f5f5;
		min-height: 90rpx;

		.tex-tarea-desc {
			width: 100%;
			min-height: 145rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.tex-input-desc {
			line-height: 66rpx;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 1;
			/** 显示的行数 **/
		}
	}

	.cu-form-group uni-picker,
	picker .picker {
		line-height: 90rpx;
		text-align: left;
	}


}
</style>